<template>
  <div class="warp">
    <a-descriptions title="会员信息" bordered :column="2">
      <a-descriptions-item v-for="item in memberInfo" :label="item.label" :key="item.field">{{
        memberInfoMap[item.field] 
      }}</a-descriptions-item>
    </a-descriptions>

    <a-descriptions title="订单信息" bordered :column="2" style="margin-top: 50px">
      <a-descriptions-item v-for="item in itemList" :label="item.label" :key="item.field">{{
        dataMap[item.field] 
      }}</a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import { BusinessOrderDetail, orderTypeDict, payModeDict } from '@/api/order/order'
export default {
  data() {
    return {
      memberInfo: [
        { label: '会员名称', field: 'memberName' },
        { label: '负责人', field: 'leadingName' },
        { label: '联系电话', field: 'leadingPhone' },
        { label: '调整前会籍', field: 'levelName' },
        { label: '调整后会籍', field: 'nowLevelName' },
        { label: '会费标准', field: 'money' },
      ],
      memberInfoMap: {
        memberName: undefined,
        leadingName: undefined,
        leadingPhone: undefined,
        levelName: undefined,
        nowLevelName: undefined,
        money: undefined,
      },
      itemList: [
        { label: '订单编号', field: 'orderCode' },
        { label: '订单状态', field: 'orderState' },
        { label: '业务类型', field: 'type' },
        // { label: '订单类型', field: 'orderType' },
        { label: '订单来源', field: 'sourceOrgName' },
        { label: '项目归属', field: 'orgName' },
        { label: '订单金额', field: 'totalMoney' },
        { label: '实缴金额', field: 'payMoney' },
        { label: '下单时间', field: 'createTime' },
        { label: '支付流水号', field: 'payCode' },
        { label: '支付方式', field: 'payMode' },
        { label: '支付时间', field: 'payTime' },
        { label: '支付人', field: 'userName' },
      ],
      dataMap: {
        orderCode: 1,
        orderState: 2,
        type: undefined,
        orderType: undefined,
        sourceOrgName: undefined,
        orgName: undefined,
        totalMoney: undefined,
        payMoney: undefined,
        createTime: undefined,
        payCode: undefined,
        payMode: undefined,
        payTime: undefined,
        userName: undefined,
      },
    }
  },
  methods: {
    async getOrderDetail() {
      let res = await BusinessOrderDetail(this.$route.query.orderCode)
      let data = res.data || {}
      Object.keys(this.dataMap).forEach((k) => {
        if (k === 'orderState') {
          this.dataMap[k] = this.Dict.getDictItem(this.Dict.getLocal('orderStateDict'), data[k]).dictLabel
        } else if (k === 'orderType') {
          this.dataMap[k] = (orderTypeDict.find((v) => v.value == data[k]) || {}).label
        } else if (k === 'type') {
          this.dataMap[k] = this.Dict.getDictItem(this.Dict.getLocal('orderPayTypeDict'), data.suborder[k]).dictLabel
        } else if (k === 'totalMoney' || k === 'payMoney') {
          this.dataMap[k] = '￥' + data[k]
        } else if (k === 'payMode') {
          this.dataMap[k] = (payModeDict.find((v) => v.value == data[k]) || {}).label
        } else {
          this.dataMap[k] = data[k]
        }
      })

      let suborder = data.suborder || {}
      Object.keys(this.memberInfoMap).forEach((k) => {
        if (k === 'money') {
          this.memberInfoMap[k] = suborder[k] + '元/' + suborder['allottedTime'] + '月'
        } else {
          this.memberInfoMap[k] = suborder[k]
        }
      })
    },
  },
  created() {
    this.getOrderDetail()
  },
}
</script>

<style scoped>
.warp {
  background-color: #fff;
  padding: 20px;
}
</style>